<template>
  <div>
    <!-- 条件 -->
    <el-card  id="top_card" class="top_nav" :shadow="shadowShow">
      <div class="top_nav_inner">
        <div class="top_nav_left">
          <el-form label-width="0px" :inline="true" :size="optionButtonSize">
            <el-form-item>
              <el-input
                v-model="form.targetDeptName"
                clearable
                :placeholder="$t('partner.hezuo29')"
                style="width: 300px"
                @keyup.enter.native="getPartnerList"
              >
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-input
                v-model="form.createName"
                clearable
                :placeholder="$t('partner.hezuo30')"
                style="width: 300px"
                @keyup.enter.native="getPartnerList"
              >
              </el-input>
            </el-form-item>
    
            <el-form-item>
              <el-button type="primary" :size="optionButtonSize" @click="getPartnerList">{{
                $t('partner.hezuo2')
              }}</el-button>
              <el-button plain :size="optionButtonSize" @click="resetClick">{{
                $t('partner.hezuo3')
              }}</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div
          v-if="
            (user_owner == 1 && user_organizedType == 1) ||
            (user_organizedRoleId == 2 && user_organizedType == 1)
          "
          class="top_nav_right"
        >
          <el-button
            :size="optionButtonSize"
            type="primary"
            icon="el-icon-plus"
            @click="addPatientHandle"
          >
            {{ $t('partner.hezuo4') }}
          </el-button>
        </div>
      </div>
    </el-card>
    <el-card id="content_card" :shadow="shadowShow" class="partner_inner">
      <el-table
        :data="tableData"
        style="width: 100%"
        size="mini"
        :header-cell-style="headercellstyle"
      >
        <!-- 诊所账号 -->
        <el-table-column v-if="user_organizedType == 1" align="center" prop="targetDeptName" :label="$t('partner.hezuo28')" />
        <!-- 技工所账号 -->
        <el-table-column v-if="user_organizedType == 2" align="center" prop="deptName" :label="$t('partner.hezuo28')" />
        
        <el-table-column align="center" prop="createName" :label="$t('partner.hezuo6')" />
        <el-table-column align="center" prop="updateDate" :label="$t('partner.hezuo13')" />
        <el-table-column align="center" prop="status" :label="$t('partner.hezuo8')">
          <template slot-scope="scope">
            <!-- 已拒绝 -->
            <el-tag v-if="scope.row.status == 0" :size="tableTagSize" type="danger">{{
              $t('partner.hezuo9')
            }}</el-tag>
            <!-- 已确认 -->
            <el-tag v-if="scope.row.status == 1" :size="tableTagSize" type="success">{{
              $t('partner.hezuo10')
            }}</el-tag>
            <!-- 待确认 -->
            <el-tag v-if="scope.row.status == 2" :size="tableTagSize" type="warning">{{
              $t('partner.hezuo11')
            }}</el-tag>
            <!-- 活跃的 -->
            <el-tag v-if="scope.row.status == 3" :size="tableTagSize" type="success">{{
              $t('partner.hezuo12')
            }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" :label="$t('partner.hezuo14')">
          <!-- scope.row.status 0已拒绝 1已确认 2待确认 3活跃的 -->
          <template slot-scope="scope">
            <!-- 诊所 -->
            <div v-if="user_organizedType == 1">
              <!-- 所有者/管理员 -->
              <div v-if="user_owner == 1 || user_organizedRoleId == 2">
                <!-- 2待确认 -->
                <div v-if="scope.row.status == 2">
                  <!-- 删除按钮 -->
                  <el-button type="text" :size="tableButtonSize" @click="shanchu(scope.row)">{{
                    $t('partner.hezuo17')
                  }}</el-button>
                </div>
                <!-- 1已确认 -->
                <div v-if="scope.row.status == 1">
                  <!-- 删除按钮 -->
                  <el-button type="text" :size="tableButtonSize" @click="shanchu(scope.row)">{{
                    $t('partner.hezuo17')
                  }}</el-button>
                </div>
                <!-- 0已拒绝 -->
                <div v-if="scope.row.status == 0">
                  <!-- 拒绝原因 -->
                  <el-button
                    type="text"
                    :size="tableButtonSize"
                    @click="(jujueDialogShow = true), (rejectReason = scope.row.rejectReason)"
                    >{{ $t('add.add104') }}</el-button
                  >
                  <!-- 删除按钮 -->
                  <el-button type="text" :size="tableButtonSize" @click="shanchu(scope.row)">{{
                    $t('partner.hezuo17')
                  }}</el-button>
                </div>
              </div>
              <!-- 诊所 普通成员 无法进行任何操作 -->
              <div v-if="user_organizedRoleId == 3"></div>
            </div>
            <!-- 技工所 -->
            <div v-if="user_organizedType == 2">
              <!-- 所有者/管理员 -->
              <div v-if="user_owner == 1 || user_organizedRoleId == 4">
                <!-- 2待确认 -->
                <div v-if="scope.row.status == 2">
                  <!-- 同意 -->
                  <el-button type="text" :size="tableButtonSize" @click="tongyi(scope.row)">{{
                    $t('partner.hezuo15')
                  }}</el-button>
                  <!-- 拒绝 -->
                  <el-button type="text" :size="tableButtonSize" @click="jujue(scope.row)">{{
                    $t('partner.hezuo16')
                  }}</el-button>
                </div>
                <!-- 1已确认 -->
                <div v-if="scope.row.status == 1">
                  <!-- 删除按钮 -->
                  <el-button type="text" :size="tableButtonSize" @click="shanchu(scope.row)">{{
                    $t('partner.hezuo17')
                  }}</el-button>
                </div>
                <!-- 0已拒绝 -->
                <div v-if="scope.row.status == 0">
                  <!-- 拒绝原因 -->
                  <el-button
                    type="text"
                    :size="tableButtonSize"
                    @click="(jujueDialogShow = true), (rejectReason = scope.row.rejectReason)"
                    >{{ $t('add.add104') }}</el-button
                  >
                  <!-- 删除按钮 -->
                  <el-button type="text" :size="tableButtonSize" @click="shanchu(scope.row)">{{
                    $t('partner.hezuo17')
                  }}</el-button>
                </div>
              </div>
              <!-- 技工所 普通成员 无法进行任何操作 -->
              <div v-if="user_organizedRoleId == 5"></div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 16px 0; float: right">
        <el-pagination
          background
          :current-page.sync="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <add ref="add" @getPartnerList="getPartnerList" />
    <el-dialog :title="$t('partner.hezuo27')" :visible.sync="jujueDialogShow" width="561px" :close-on-click-modal="false">
      <div>
        {{ rejectReason }}
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button plain :size="optionButtonSize" @click="jujueDialogShow = false">{{
          $t('partner.hezuo24')
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import add from './add.vue';
import { isMobile, isEmail } from '@/utils/validate';

export default {
  // <!-- 合作伙伴 -->
  name: 'BLZMasterIndex',
  components: {
    add,
  },
  data() {
    return {
      form: {
        input: '', // name姓名 contactWay手机号或邮箱
        createDate: '',
        createName: '',
        targetDeptName: '',
      },
      tableData: [],
      page: 1, // 默认第1页
      limit: 20, // 每页条数
      total: 0, // 总条数
      user_organizedType: '',
      user_organizedRoleId: '', // 权限id
      jujueDialogShow: false,
      rejectReason: '',
      user_owner: '',

    };
  },

  created() {
    this.getPartnerList();
  },
  mounted() {
    this.user_organizedType = window.localStorage.getItem('user_organizedType');
    // this.user_organizedRoleId = window.localStorage.getItem("user_organizedRoleId")
    this.user_organizedRoleId = localStorage.getItem('user_roleId');
    this.user_owner = localStorage.getItem('user_owner');
    this.$clacTableHeight();
  },
  methods: {
    // 重置
    resetClick() {
      this.form = {
        input: '', // name姓名 contactWay手机号或邮箱
        createDate: '',
        createName: '',
        targetDeptName: '',
      };
      this.page = 1; // 默认第1页
      this.limit = 20; // 每页条数
      this.total = 0; // 总条数
      this.tableData = [];
      this.getPartnerList();
    },
    // 拿表单数据
    getPartnerList() {
      if (isMobile(this.form.input)) {
        // 是手机号
      } else if (isEmail(this.form.input)) {
        // 是邮箱
      } else {
        // 是名称
      }
      this.$http
        .get(
          `/partner/page?page=${this.page}&limit=${this.limit}&targetDeptName=${this.form.targetDeptName}&timeZone=${this.$timeZone}&createName=${this.form.createName}`,
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.tableData = res.data.list;
            this.total = res.data.total;
            if(this.tableData.length <= 0 && this.form.page > 1){
              this.page -= 1;
              this.getPartnerList();
            }
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    tongyi(val) {
      
      this.$confirm(
        this.$t('add.add014') + `【${val.deptName}】` + this.$t('add.add015'),
        this.$t('members.chengyuan38'),
        {
          confirmButtonText: this.$t('members.chengyuan31'),
          cancelButtonText: this.$t('members.chengyuan30'),
          type: 'warning',
        },
      )
        .then(async () => {
          this.$http
            .put('/partner/checkAgree/' + val.id)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              } else {
                this.$message.success(this.$t('partner.hezuo18'));
                this.getPartnerList();
              }
            })
            .catch((err) => {
              console.log('err', err);
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('partner.hezuo21'),
          });
        });
    },
    jujue(val) {
      this.$confirm(
        this.$t('add.add049') + `【${val.deptName}】` + this.$t('add.add051'),
        this.$t('members.chengyuan38'),
        {
          confirmButtonText: this.$t('members.chengyuan31'),
          cancelButtonText: this.$t('members.chengyuan30'),
          type: 'warning',
        },
      )
        .then(async () => {
          this.$prompt(this.$t('add.add109'), this.$t('add.add140'), {
            confirmButtonText: this.$t('add.add142'),
            cancelButtonText: this.$t('add.add143'),
            inputErrorMessage: this.$t('add.add72'),
          })
            .then(({ value }) => {
              if (value == '') {
                return this.$message.error(this.$t('add.add109'));
              }
              const form = {
                id: val.id,
                rejectReason: value,
              };
              this.$http
                .put('/partner/checkReject/', form)
                .then(({ data: res }) => {
                  if (res.code !== 0) {
                    return this.$message.error(res.msg);
                  } else {
                    this.$message.success(this.$t('partner.hezuo19'));
                    this.getPartnerList();
                  }
                })
                .catch((err) => {
                  console.log('err', err);
                });
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: this.$t('add.add73'),
              });
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('partner.hezuo21'),
          });
        });
    },
    shanchu(val) {
      // ${this.$t('members.chengyuan28')}【${val.createName}】${this.$t('members.chengyuan52')}？
      this.$confirm(this.$t('add.add175'), this.$t('members.chengyuan38'), {
        confirmButtonText: this.$t('members.chengyuan31'),
        cancelButtonText: this.$t('members.chengyuan30'),
        type: 'warning',
      })
        .then(async () => {
          this.$http
            .delete('/partner/delete/' + val.id)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              } else {
                this.$message.success(this.$t('partner.hezuo20'));
                this.getPartnerList();
              }
            })
            .catch((err) => {
              console.log('err', err);
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('partner.hezuo21'),
          });
        });
    },
    // 取消
    quxiao(val) {
      this.$http
        .put('/partner/checkCancel/' + val.id)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.$message.success(this.$t('partner.hezuo21'));
            this.getPartnerList();
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    addPatientHandle() {
      this.$refs.add.dialogShow = true;
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getPartnerList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getPartnerList();
    },
  },
};
</script>

<style lang="scss" scoped>
.top_nav {
  // height: 77px;
  box-sizing: border-box;

  .top_nav_inner {
    padding-top: 5px;
    display: flex;
    justify-content: space-between;
  }
}

.partner_inner {
  margin-top: 20px;
}
</style>
